<template>
  <!-- 网格示意落点 -->
  <div class="locate-grid">
    <!-- <div
      v-if="nodeWidth===nodeHeight"
      class="node-content"
      :style="{
          left: `${differenceOfGridWidth}px`,
          top: `${differenceOfGridHeight}px`,
          width: `${(nodeGridSize.rowCount - 1) * gridSizeHeight + nodeHeight}px`,
          height: `${(nodeGridSize.rowCount - 1) * gridSizeHeight + nodeHeight}px`,
        }"
    >
    </div> -->
    <div
      class="node-content"
      :style="{
        left: `${differenceOfGridWidth}px`,
        top: `${differenceOfGridHeight}px`,
        width: `${(nodeGridSize.colCount - 1) * gridSizeWidth + nodeWidth}px`,
        height: `${
          (nodeGridSize.rowCount - 1) * gridSizeHeight + nodeHeight
        }px`,
      }"
    ></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class DragTargetPositionl extends Vue {
  // 节点高度
  @Prop({ type: Number, default: 0 }) nodeHeight!: number
  // 节点宽度
  @Prop({ type: Number, default: 0 }) nodeWidth!: number
  // 差值宽
  @Prop({ type: Number, default: 0 }) differenceOfGridWidth!: number
  // 差值高
  @Prop({ type: Number, default: 0 }) differenceOfGridHeight!: number
  // 网格高
  @Prop({ type: Number, default: 0 }) gridSizeHeight!: number
  // 网格宽
  @Prop({ type: Number, default: 0 }) gridSizeWidth!: number
  // 网格尺寸  n 行 m 列
  @Prop({ type: Object, default: () => ({}) }) nodeGridSize!: any
}
</script>

<style scoped lang="less">
/* 定位网格问题 */
.locate-grid {
  position: absolute;

  .node-content {
    border: 1px dashed #5862e6;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.9rem;
    position: absolute;
  }
}
</style>
